<style scoped>
  .layout-con {
    height: 100%;
    width: 100%;
  }

  .menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }

  .menu-item i {
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }

  .collapsed-menu span {
    width: 0px;
    transition: width .2s ease;
  }

  .collapsed-menu i {
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }

  .title-top-center {
    text-align: center;

  }

  .title-top-right {
    float: right
  }

  .btn_tools {
    padding: 6px 10px 6px 10px;
    background: #eee;
    border-radius: 20px;
  }
</style>
<template>
  <Row type="flex" justify="center" align="top" class="code-row-bg">
    <Col span="1" style="background:#3F88D5;height:100vh;">
      <NavLeft :selected="1" :avatar="avatar"></NavLeft>
    </Col>
    <Col span="4">
      <NavMiddle :itemList="itemList"></NavMiddle>
    </Col>
    <Col span="19">
      <Layout>
        <Content :style="{padding: '0 16px 16px'}">
          <Breadcrumb :style="{margin: '16px 0'}">
            <Row type="flex" justify="space-between">
              <Col span="8">

                <a type="text" size="large" @click="$router.back(-1)">
                  <Icon type="ios-arrow-back"></Icon>
                  返回
                </a>

              </Col>
              <Col span="8" class="title-top-center"
                   style="font-size: 16px; font-weight: bold; color: rgb(70, 76, 91);text-align:center;">新建管理单元
              </Col>
              <Col span="8">

              </Col>
            </Row>

          </Breadcrumb>
          <Card :bordered="true" dis-hover>
            <div style="height: 600px">

              <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="top">
                <FormItem label="选择企业微信并关联部门" prop="department">
                  <Select v-model="formValidate.department" clearable style="width:100%"
                          @on-change="handleChangeDepartment">
                    <Option v-for="item in departmentList" :value="item.value" :key="item.value">{{ item.label }}
                    </Option>
                  </Select>
                </FormItem>

                <Divider/>

                <FormItem>

                  <Row>
                    <Col span="11">

                      <FormItem label="负责人" prop="head">
                        <Select v-model="formValidate.head" style="width:100px">
                          <Option v-for="item in userList" :value="item.value" :key="item.value">{{ item.label }}
                          </Option>
                        </Select>
                      </FormItem>

                    </Col>
                    <Col span="11">
                      <FormItem label="指标组" prop="targetgroup">
                        <Select v-model="formValidate.targetgroup" style="width:100px">
                          <Option v-for="item in groupList" :value="item.value" :key="item.value">{{ item.label }}
                          </Option>
                        </Select>
                      </FormItem>

                    </Col>
                  </Row>
                </FormItem>

                <Divider/>

                <FormItem label="区域" prop="local">
                  <Cascader v-model="formValidate.local" :data="citydata" trigger="hover"
                            @on-change="handleChange"></Cascader>
                </FormItem>

                <Divider/>

                <FormItem label="备注" prop="desc">
                  <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                         placeholder="请录入备注..."></Input>
                </FormItem>

                <FormItem>
                  <Button type="primary" style="width:144px" @click="handleSubmit('formValidate')">确认</Button>
                  <Button @click="handleReset('formValidate')" style="width:144px;margin-left: 8px">取消</Button>
                </FormItem>

              </Form>


            </div>
          </Card>
          <div style="margin-top: 20px">
          </div>
        </Content>
      </Layout>

    </Col>
  </Row>
</template>
<script>
  import cookie from 'js-cookie';
  import NavLeft from '@/components/NavLeft';
  import NavMiddle from '@/components/NavMiddle';

  export default {
    data() {
      return {
        isCollapsed: false,
        groupList: [
          {
            value: '1',
            label: '班组列表'
          },
        ],
        departmentList: [],
        userList: [],
        itemList: [],
        avatar: "",
        citydata: [{
          value: '500000',
          label: '重庆',
          children: [
            {
              value: '500105',
              label: '江北'
            },
            {
              value: '500112',
              label: '渝北'
            },
            {
              value: '500109',
              label: '北培'
            },
            {
              value: '500113',
              label: '巴南'
            }
          ]
        },
          {
            value: '320000',
            label: '江苏',
            children: [
              {
                value: '320100',
                label: '南京',
              }
            ],
          },
          {
            value: '330000',
            label: '浙江',
            children: [
              {
                value: '330100',
                label: '杭州',
              }
            ],
          },
          {
            value: '340000',
            label: '安徽',
            children: [
              {
                value: '340200',
                label: '芜湖',
              }
            ],
          }],
        formValidate: {
          name: '',
          department: '',
          head: '',
          targetgroup: '',
          local: [],
          desc: ''
        },
        ruleValidate: {
          department: [
            {required: true, message: '请选择部门', trigger: 'blur'},
          ],
          head: [
            {required: true, message: '请选择负责人', trigger: 'change'}
          ],
          targetgroup: [
            {required: true, message: '请选择指标组', trigger: 'change'}
          ],
          desc: [
            {required: false, message: '请输入备注', trigger: 'blur'},
            {type: 'string', min: 2, message: '输入文字太少', trigger: 'blur'}
          ]
        }
      };
    },
    components: {NavLeft: NavLeft, NavMiddle: NavMiddle},
    methods: {
      handleSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            var str = {
              department: this.formValidate.department,
              head: this.formValidate.head,
              desc: this.formValidate.desc,
              group: this.formValidate.targetgroup,
              local: this.formValidate.local,
              loginType: cookie.get('loginType')
            };
            var strdata = this.$twjsdes.enstr(str);
            console.log('111')
            this.$http.post(this.$API_URL + '/item/post', {alldata: strdata.alldata}).then((response) => {
              var res = this.$twjsdes.decrypt(response.data.alldata);
              if (res.status == -1 && res.data.backurl) {
                this.$Modal.warning({
                  title: '提示',
                  content: '请在企业微信授权登录后使用',
                  onOk: () => {
                    if (this.$twjsdes.isWechat() === true) {
                      window.location.href = res.data.backurl_oauth2
                    } else {
                      window.location.href = res.data.backurl
                    }
                  }
                });

              } else if (res.status != 1) {
                this.$Message.error(res.msg);
                return;
              }

              this.$Message.success('Success!');

              this.$router.push({
                path: '/'
              })

            }).catch(function (error) {
              this.$Message.error('网络错误，请检查后重试');
            });


          } else {
            this.$Message.error('请将必填项填写完整!');
          }
        })
      },
      handleReset(name) {
        this.$refs[name].resetFields();
      },
      handleChange(value, selectedData) {
        this.local = selectedData.map(o => o.label).join(', ');
      },
      handleChangeDepartment(value) {
        var department_id = value;
        if (!department_id) {
          this.$Message.error('请选择部门');
          return;
        }
        var str = {department_id: department_id, loginType: cookie.get('loginType')};
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/userlist.html', {alldata: strdata.alldata}).then((response) => {
          var res = this.$twjsdes.decrypt(response.data.alldata);
          console.log(res,123)
          if (res.status == -1 && res.data.backurl) {
            this.$Modal.warning({
              title: '提示',
              content: '请在企业微信授权登录后使用',
              onOk: () => {
                window.location.href = res.data.backurl
              }
            });
            return;
          } else if (res.status != 1) {
            this.$Message.error(res.msg);
            return;
          }

          this.userList = res.data.user_list;
        }).catch(function (error) {
          this.$Message.error('网络错误，请检查后重试');
        });

      },
      getData() {
        var str = {loginType: cookie.get('loginType')};
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/postchoice.html', {alldata: strdata.alldata}).then((response) => {
          var res = this.$twjsdes.decrypt(response.data.alldata);
          console.log('222')
          console.log('res:', res)
          if (res.status == -1 && res.data.backurl) {
            this.$Modal.warning({
              title: '提示',
              content: '请在企业微信授权登录后使用',
              onOk: () => {
                window.location.href = res.data.backurl
              }
            });
            return;
          } else if (res.status != 1) {
            this.$Message.error(res.msg);
            return;
          }

          this.departmentList = res.data.item_list;
          this.groupList = res.data.target_list;
          this.avatar = res.data.avatar;
        }).catch(function (error) {
          this.$Message.error('网络错误，请检查后重试');
        });

      },

    },
    created() {
      this.getData();
    },
    computed: {
      menuitemClasses: function () {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      }
    }
  }
</script>

